<template>
  <div id="blance-withdraw">
    <div class="content-withdraw" v-loading="loading">
      <div class="header-title">{{type == 1? $t('member.blance.withdraw.withdrawal') :$t('member.blance.withdraw.transfer') }} 【  {{ $t('member.blance.withdraw.tip') }} 】</div>
      <div class="withdraw-row">
        <div class="row-wrap">
          <h6> {{ $t('member.blance.withdraw.chooseCurrency') }}</h6>
          <div class="wrap-box">
            <div class="wrap" @click="isShow = !isShow">
              <span>{{walletObj.name}}</span>
              <i class="el-icon-arrow-up" v-show="isShow" style="color:#ccc;"></i>
              <i class="el-icon-arrow-down" v-show="!isShow" style="color:#ccc;"></i>
            </div>
            <transition name="el-fade-in-linear">
              <div class="country-ul" v-show="isShow">
                <div class="country-li" v-for="(obj,i) in walletArr" :key="i" @click.stop="setCountry(obj)">
                  <div class="li-name">{{obj.name}}</div>
                </div>
              </div>
						</transition>
          </div>
        </div>
        <div class="row-wrap">
          <h6>{{type == 1?$t('member.blance.withdraw.withdrawalAddress')  : $t('member.blance.withdraw.counterpartyAccount') }}</h6>
          <div class="wrap-box">
            <div class="wrap" >
              <el-input v-if="type == 1" v-model="formObj.to_address" @input="handleDisabled()" :placeholder="$t('member.blance.withdraw.iwithdrawalAddress') "></el-input>
              <el-input v-if="type == 2" v-model="formObj.to_member_id" @input="handleDisabled()" :placeholder="$t('member.blance.withdraw.otherSideUID') "></el-input>
            </div>
          </div>
        </div>
        <div class="row-wrap">
          <h6>
            <span>{{type == 1? $t('member.blance.withdraw.numberOfWithdrawals')  : $t('member.blance.withdraw.numberOfTransfers') }}</span>
            <span> {{ $t('member.blance.withdraw.availableBalance') }}：{{walletObj.balance}} {{walletObj.name}}</span>
          </h6>
          <div class="wrap-box">
            <div class="wrap" >
              <el-input v-model="formObj.money" @input="handleDisabled()" :placeholder="$t('member.blance.withdraw.pleaseEnterTheQuantity') "></el-input>
              <div class="wrap-r">
                <span>{{walletObj.name}}</span>
                <span class="all" @click="getAll()"> {{ $t('member.blance.withdraw.entire') }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row-wraps">
          <div class="wrap-item">
            <h6> {{ $t('member.blance.withdraw.handlingFee') }}</h6>
            <div class="wrap">
              <span>{{type == 1? walletObj.withdraw_fee : walletObj.transfer_fee}}</span>
              <span>{{walletObj.name}}</span>
            </div>
          </div>
          <div class="wrap-item">
            <h6> {{ $t('member.blance.withdraw.arrivalQuantity') }}</h6>
            <div class="wrap">
              <span>{{countNum}}</span>
              <span>{{walletObj.name}}</span>
            </div>
          </div>
        </div>
        <div class="row-wrap">
          <h6> {{ $t('member.blance.withdraw.paymentPassword') }}</h6>
          <div class="wrap-box">
            <div class="wrap" >
              <el-input type="password" v-model="formObj.pay_password" @input="handleDisabled()" :placeholder="$t('member.blance.withdraw.iPayPassword') "></el-input>
            </div>
          </div>
        </div>
        <div class="row-footer">
          <el-button size="medium" @click="submitForm()" :disabled="disabled" type="primary">{{type == 1?$t('member.blance.withdraw.withdrawal') :$t('member.blance.withdraw.transfer')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { coinList,withdrawFn,transferFn } from '@/api/member/blance'
export default {
  data() {
    return {
      isShow: false,
      loading: true,
      walletArr: [],
			walletObj: {},
			money_type: '',
      disabled: true,
      formObj: {
				to_address: '',//
				money_type: '',//
				money: '',//
				pay_password: '', // 
			},
      countNum: 0,
    };
  },
  computed: {
    type: function(){
      return this.$route.query.type
    },
    cid: function(){
      return this.$route.query.cid ? this.$route.query.cid : ''
    }
  },
  created() {
    if(this.type == 2){ // 划转
			this.formObj = {
				to_member_id: '',//
				money_type: '',//
				money: '',//
				pay_password: '', // 
			}
		}
    this.getList();
  },
  mounted() {

  },
  methods: {
    getAll(){
      this.formObj.money = this.walletObj.balance;
    },
    // 处理是否可以提交
    handleDisabled(){
      this.disabled = !Object.values(this.formObj).every(v => v);
      if(this.formObj.money){
        let fee_rate = this.type == 1? this.walletObj.withdraw_fee : this.walletObj.transfer_fee; // 手续费率
        this.countNum = this.$util.numSub(Number(this.formObj.money),Number(fee_rate))

      }
    },
    // 获取币种
		setCountry(obj){
			this.walletObj = obj;
      this.formObj.money_type = obj.money_type;
			this.isShow = false;
		},
    getList(){
      coinList().then(async (res) => {
        if(res.code == 0){
          this.walletArr = res.data;
          this.walletObj = this.cid ? this.walletArr.find(v=>{
            return v.money_type == this.cid;
          }) : this.walletArr[0]
          this.formObj.money_type = this.walletObj.money_type;
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      })
    },
    // 提交
    submitForm(){
      let msg = this.type == 1?this.$t('member.blance.withdraw.tbltAvailableBalance') :this.$t('member.blance.withdraw.hzltAvailableBalance')
      if(Number(this.formObj.money) > Number(this.walletObj.balance)){
        console.log(1111)
        return this.$message.error(msg);
      }
      this.loading = true;
      if(this.type == 1){
        withdrawFn(this.formObj).then(res=>{
          this.loading = false;
          if(res.code == 0){
            this.$message.success(this.$t('member.blance.withdraw.withdrawSuccessfully'))
            this.$back();
          }else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        })
      }else if(this.type == 2){
        transferFn(this.formObj).then(res=>{
          this.loading = false;
          if(res.code == 0){
            this.$message.success(this.$t('member.blance.withdraw.successfulTransfer'))
            this.$back();
          }else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        })
      }
    },
  }
};
</script>

<style lang="scss" >
  #blance-withdraw {
    .el-input__inner {
      border: none;
      padding: 0px;
      height: 100%;
    }
  }
</style>

<style scoped lang="scss">
  .content-withdraw {
    width: 100%;
    background: #fff;
  }
  .header-title {
    width: 100%;
		padding: 18px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #DCDFE6;
  }
  .withdraw-row {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .row-wrap {
      padding-top: 24px;
    }
    h6 {
      font-size: 12px;
      color: #868686;
      line-height: 17px;
      margin-bottom: 13px;
      font-weight: normal;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .wrap-box {
      position: relative;
      .wrap {
        color: #FF547B;
				width: 460px;
				height: 40px;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 15px;
				box-sizing: border-box;
        .el-input {
          width: 300px;
        }
        .wrap-r {
          display: flex;
				  align-items: center;
          font-size: 14px;
          color: #303133;
          span {
            line-height: 20px;
          }
          .all {
            color: #FF547B;
            padding-left: 10px;
            border-left: 1px solid #DCDFE6FF;
            margin-left: 8px;
          }
        }
      }
      .country-ul {
				position: absolute;
				left: 0px;
				top: 40px;
				width: 360px;
				min-height: 70px;
				overflow: auto;
				background-color: rgb(255, 255, 255);
    		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
				z-index: 11;
				.country-li {
					padding: 10px 16px;
					box-sizing: border-box;
				}
				.country-li:hover {
					background: #F7F7F7;
					.li-name {
						color: #FF547B;
					}
				}
			}
      
    }
    .row-wraps {
      padding-top: 20px;
      width: 460px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .wrap-item {
        width: 48%;
        .wrap {
          height: 40px;
          border: 1px solid #DCDFE6;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 15px;
          box-sizing: border-box;
        }
      }
    }
    .row-footer {
      padding: 35px 0px 30px;
      .el-button {
        width: 460px;
        height: 38px;
      }
    }
  }
</style>
